import React from 'react'
import {withRouter,} from 'react-router-dom'
import Quota from '../../res/images/web/how-to-invite/zhuangshi@2x.png'
import StepOne from '../../res/images/web/how-to-invite/去邀请@2x.png'
import StepTwo from '../../res/images/web/how-to-invite/分享小图@2x.png'
import StepThreeOne from '../../res/images/web/how-to-invite/注册邀请码@2x.png'
import StepThreeTwo from '../../res/images/web/how-to-invite/个人信息邀请码@2x.png'
import './how-to-invite.css'

const HowToInvite = props => {

    return <>

        <div className='step-ctn'>

            <div className='flex-center-align-center'>
                <img src={Quota} alt='' className='step-quota'/>
                <p className='step-title'>步骤1</p>
                <img src={Quota} alt='' className='step-quota'/>
            </div>

            <p className='step-desc'>
                点击‘去邀请’
            </p>

            <img alt='' src={StepOne} className='step-img'/>

        </div>

        <div className='step-ctn'>

            <div className='flex-center-align-center'>
                <img src={Quota} alt='' className='step-quota'/>
                <p className='step-title'>步骤2</p>
                <img src={Quota} alt='' className='step-quota'/>
            </div>

            <p className='step-desc'>
                将该图片转发至微信好友或者朋友圈
            </p>

            <img alt='' src={StepTwo} className='step-img'/>

        </div>

        <div className='step-ctn'>

            <div className='flex-center-align-center'>
                <img src={Quota} alt='' className='step-quota'/>
                <p className='step-title'>步骤3</p>
                <img src={Quota} alt='' className='step-quota'/>
            </div>

            <p className='step-desc'>
                方式1：手机号码注册<br/>在注册页填写邀请码
            </p>

            <img alt='' src={StepThreeOne} className='step-img'/>

            <p className='step-desc'>
                方式2: 微信登录<br/>进入App 我的>个人信息>邀请码 填写
            </p>

            <img alt='' src={StepThreeTwo} className='step-img'/>

        </div>

    </>

}

export default withRouter(HowToInvite)
